<template>
	<view class="bg-white" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/'+skin+'_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="padding-top-50 padding-left-40 ">
			<view class="">
				<image class="w-80 h-80" :src="Imgbase+'/'+skin+'_goodpoor_img1.png'" mode="aspectFit" @click="back">
				</image>

			</view>
		</view>

		<view class="w-690 h-1400 margin-auto"
			:style="{background:'url('+Imgbase+'/new_goodset_bgc.png)','background-size':'100% 100%',}">
			<view class="padding-top-150 padding-left-45 df alc">
				<view class="">
					<image class="w-280 h-80 margin-bottom-10" @click="toPage('index','address')"
						:src="Imgbase + '/new_goodset_img8.png'" mode="aspectFit">
					</image>
				</view>
				<view class=" padding-left-40">
					<button class="w-280 h-80 margin-bottom-10"
						:style="{background:'url('+Imgbase+'/new_goodset_img7.png) no-repeat','background-size':'100% 100%',}"
						open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					</button>
				</view>
			</view>
			<view class="padding-left-45 df alc">
				<view class="">
					<image class="w-280 h-80" @click="changenickname()" :src="Imgbase + '/new_goodset_img6.png'"
						mode="aspectFit">
					</image>
				</view>
				<view class="fl padding-left-40">
					<!-- <image class="w-280 h-80" @click="toPage('index','address')"
						:src="Imgbase + '/new_goodset_img5.png'" mode="aspectFit">
					</image> -->
				</view>
			</view>

			<view class="w100 padding-top-100">
				<image class="w100 h-100 margin-bottom-40" :src="Imgbase + '/new_goodset_img4.png'" mode="aspectFit"
					@click="toPage('index','explain',1)">
				</image>
				<image class="w100 h-100 margin-bottom-40" :src="Imgbase + '/new_goodset_img3.png'" mode="aspectFit"
					@click="toPage('index','explain',2)">
				</image>
				<image class="w100 h-100 margin-bottom-40" :src="Imgbase + '/new_goodset_img2.png'" mode="aspectFit"
					@click="toPage('index','explain',3)">
				</image>
				<!-- <image class="w100 h-100" :src="Imgbase + '/new_goodset_img9.png'" mode="aspectFit"
					@click="skinshow = true">
				</image> -->
			</view>
		</view>




		<view class="cu-modal" :class="modalName=='changeNickname'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改昵称</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top">
						<view class="title">新昵称</view>
						<input placeholder="请输入新昵称" name="input" v-model="newname"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="sureNickname()">确定</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 皮肤选择 -->
		<u-picker :show="skinshow" :columns="zh_columns" @cancel="skinshow = false" @confirm="chooseskin"
			closeOnClickOverlay></u-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import global from '@/apiPost/mixin.js'
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				modalName: null,
				newname: '',
				avatarUrl: '',
				show: false,
				desc: '',
				columns: [],
				zh_columns: [],
				skinshow: false,
				skin: 'classics'
			}
		},
		onShow() {
			if (uni.getStorageSync('skin')) {
				this.skin = uni.getStorageSync('skin')
			}
			this.skins()

		},
		methods: {
			chooseskin(e) {
				this.skinshow = false
				this.setSkin(this.columns[e.indexs[0]])
			},
			// 设置皮肤
			async getSkin() {
				let _this = this
				let item = await this.$api.post('user/skins', {
					token: uni.getStorageSync('token'),
				})
				uni.setStorageSync('skin', item.data.skin);
				this.skin = item.data.skin
			},
			// 选择皮肤接口
			async setSkin(e) {
				let _this = this
				let item = await this.$api.post('user/setSkin', {
					token: uni.getStorageSync('token'),
					skin: e
				})
				if (item.code == '1') {
					this.getSkin()

					this.$refs.uToast.show({
						message: item.msg,
					})
				}
			},
			// 皮肤选择
			async skins() {
				let _this = this
				let item = await this.$api.post('user/skins', {
					token: uni.getStorageSync('token'),
				})
				this.zh_columns = []
				this.zh_columns.push(item.data.zh_list)
				this.columns = item.data.list
			},
			async explain(e) {
				let _this = this
				let item = await this.$api.post('Index/explain', {
					id: e
				})
				this.desc = item.data.desc
				this.show = true
			},
			close() {
				this.show = false
			},
			back() {
				uni.navigateBack()
			},
			// 实名认证
			faceid(userName, userIdCard) {
				uni.startSoterAuthentication({
					requestAuthModes: ['facial'],
					challenge: '123456',
					authContent: '请用FaceID解锁',
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			onChooseAvatar(e) {
				// this.changeAvatar(e.detail.avatarUrl)
				let _this = this
				uni.uploadFile({
					url: _this.$globals.apibase + '/api/Usersys/changeAvatar', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						token: uni.getStorageSync('token'),
						file: e.detail.avatarUrl
					},
					success(res) {
						let sss = JSON.parse(res.data)
						console.log(sss)
						if (sss.code == 1) {
							uni.showToast({
								title: '修改成功', //显示的文字 
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "none" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							})
						} else {
							uni.showToast({
								title: res.data.msg, //显示的文字
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "none" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							})
						}
					}
				})
			},
			// 修改用户头像
			changeAvatar(url) {
				console.log(url)
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Usersys/changeAvatar',
					data: {
						token: uni.getStorageSync('token'),
						file: url
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg, //显示的文字 
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "none" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							})
						} else {
							uni.showToast({
								title: res.data.msg, //显示的文字
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "none" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							})
						}
					}
				});
			},
			toExplain(id) {
				uni.navigateTo({
					url: `/pages/index/explain?id=${id}`
				});
			},
			quitapp() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '请问您是否要退出APP',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('signed');
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						} else if (res.cancel) {}
					}
				});
			},
			toPage(folder, name, id = -1) {
				if (id == -1) {
					uni.navigateTo({
						url: `/pages/${folder}/${name}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/${folder}/${name}?id=${id}`
					});
				}
			},
			changeavatar() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: res => {
						let imgFiles = res.tempFilePaths
						this.uploadTheImg(imgFiles)
					}
				})
			},
			async uploadTheImg(imgFiles) {
				let _this = this;
				uni.showLoading({
					mask: true,
					title: '上传中...'
				})
				uni.uploadFile({
					url: _this.$globals.apibase + '/api/Applogin/changeAvatar',
					filePath: imgFiles[0],
					name: 'file',
					formData: {
						token: uni.getStorageSync('token'),
					},
					success: (res) => {
						uni.showToast({
							icon: 'none',
							title: '头像修改成功!'
						});
						uni.hideLoading();
					},
					fail: () => {}
				})
			},
			changenickname() {
				this.modalName = 'changeNickname';
			},
			hideModal(e) {
				this.modalName = null
				this.newname = ''
			},
			sureNickname() {
				let _this = this;
				if (this.newname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入新昵称!'
					});
					return;
				}
				if (this.newname.length >= 10) {
					uni.showToast({
						icon: 'none',
						title: '新昵称长度不能超过10个字符哟!'
					});
					return;
				}
				if (this.newname.search('死') != -1 ||
					this.newname.search('全家') != -1 ||
					this.newname.search('爸') != -1 ||
					this.newname.search('妈') != -1 ||
					this.newname.search('草') != -1 ||
					this.newname.search('爹') != -1 ||
					this.newname.search('母') != -1 ||
					this.newname.search('艹') != -1 ||
					this.newname.search('户口本') != -1) {
					uni.showToast({
						icon: 'none',
						title: '新昵称中有不文明用语哟!'
					});
					return;
				}
				if (this.newname.search('ㅤ') != -1 ||
					this.newname.search(' ') != -1) {
					uni.showToast({
						icon: 'none',
						title: '新昵称中有不可使用的符号哟!'
					});
					return;
				}
				uni.request({
					url: _this.$globals.apibase + '/api/Usersys/changeNickname',
					data: {
						token: uni.getStorageSync('token'),
						nickname: _this.newname,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'none',
								title: '昵称修改成功!',
								duration: 5000,
							});
							_this.modalName = null
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			checkproject() {
				uni.showToast({
					icon: 'none',
					title: '已经是最新版本了!'
				});
			},
		},
		onLoad() {}
	}
</script>

<style lang="less" scoped>
	button::after {
		border: none;
	}

	.show_item {
		border: 6rpx solid #61AE5D;
		border-radius: 15rpx;
	}
</style>